<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<%@ include file="../include/head.jsp" %>
<%@ include file="../include/top.jsp" %>
<%@ include file="../include/left.jsp" %>
<div class="main-content">

    <%@ include file="../include/navigate.jsp" %>
    
    <div class="container">

        <c:if test="${error != null }">
            <div class="alert alert-danger alert-dismissable">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                <strong>异常:</strong> ${error}
            </div>
        </c:if>
        <c:if test="${msg != null }">
            <div class="alert alert-success alert-dismissable">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                <strong>提示:</strong> ${msg}
            </div>
        </c:if>
        
        <div class="widget-box">
            <div class="widget-box-header">
                <div class="col-sm-9">
                    <div class="title">数据源列表</div>
                </div>
                <div class="col-sm-3" style="text-align:right;">
                	<c:if test="${sessionScope.validUrls.contains('/connection/add')}">
	                    <div class="btn-group-sm" style="padding:2px;">
	                        <a type="button" class="btn btn-default btn-sm glyphicon glyphicon-plus" href="${pageContext.request.contextPath}/connection/add"> 添加</a>
	                    </div>
                    </c:if>
                </div>
            </div>
            <div class="widget-box-content" style="padding:15px;">
                <div class="dataTables_wrapper form-inline">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>名称</th>
                                <th>类型</th>
                                <th>主机ip</th>
                                <th>端口</th>
                                <th>数据库名</th>
                                <th>用户名</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${connectionList}" var="connection">
                                <tr>
                                    <td><kbd>${connection.connectionName}</kbd></td>
                                    <td>${connection.databaseType}</td>
                                    <td>${connection.hostIp}</td>
                                    <td>${connection.port}</td>
                                    <td>${connection.databaseName}</td>
                                    <td>${connection.username}</td>
                                    <td>
                                        <div class="btn-group">
                                        	<c:if test="${sessionScope.validUrls.contains('/connection/edit')}">
                                            	<a class="btn btn-primary" href="${pageContext.request.contextPath}/connection/edit?id=${connection.connectionId}">修改</a>
                                            </c:if>
                                            <button id="testDatabaseBtn" class="btn btn-warning" onclick="testDatabase(${connection.connectionId})">测试</button>
                                            <c:if test="${sessionScope.validUrls.contains('/connection/del')}">
	                                            <button class="btn btn-danger" onclick="openModal('${pageContext.request.contextPath}/connection/del?id=${connection.connectionId}','删除数据源？','被作业引用的数据源无法删除，数据源删除之后无法恢复，是否继续？')">
	                                                删除
	                                            </button>
                                            </c:if>
                                        </div>
                                        &nbsp;&nbsp;&nbsp;&nbsp;<label id="pingStatus_${connection.connectionId}"></label>

                                    </td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

			<div class="row clearfix" align="center">
				<div class="col-md-12">
					<nav>
						<ul class="pagination pagination-sm">
						</ul>
					</nav>
				</div>
			</div>
		</div>
    </div>
    <div style="position:fixed;bottom:0px; width:100%;" align="center">
        <%@ include file="../include/footer.jsp" %>
    </div>
</div>

<script type="text/javascript">

	$('.pagination').twbsPagination({
	    totalPages: ${pageInfo.pages},
	    visiblePages: 5,
	    href: '?page={{number}}'
	});

    function testDatabase(id) {
        $.ajax({
            type: "get",
            url: "${pageContext.request.contextPath}/connection/test?id=" + id,
            beforeSend: function(){
            	$("#pingStatus_" + id).html("正在测试连接...");
            },
            success: function (data) {
                if("success" == data){
                	$("#pingStatus_" + id).html("连接可用！");
                } else {
                	$("#pingStatus_" + id).html("连接不可用！");
                }
            },
            error: function(){
            	$("#pingStatus_" + id).html("连接不可用！");
            }
            
        });
    }
</script>

<%@ include file="../include/bottom.jsp" %>